<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 活动推荐绘本集
const activityBooks = ref([
  {
    id: 1,
    title: '小猪佩奇系列',
    cover: 'https://img2.doubanio.com/view/subject/s/public/s34020742.jpg',
    originalPrice: 128,
    salePrice: 64,
    discount: 5,
  },
  {
    id: 2,
    title: '神奇校车系列',
    cover: 'https://img1.doubanio.com/view/subject/s/public/s4417238.jpg',
    originalPrice: 168,
    salePrice: 99,
    discount: 6,
  },
  {
    id: 3,
    title: '大卫系列绘本',
    cover: 'https://img2.doubanio.com/view/subject/s/public/s33493789.jpg',
    originalPrice: 88,
    salePrice: 44,
    discount: 5,
  },
  {
    id: 4,
    title: '青蛙弗洛格系列',
    cover: 'https://img1.doubanio.com/view/subject/s/public/s1070959.jpg',
    originalPrice: 108,
    salePrice: 65,
    discount: 6,
  },
])

// 跳转到商城
function goToShop() {
  uni.showToast({
    title: '跳转到商城页面',
    icon: 'none',
  })
}

onLoad(() => {
  console.log('活动页面加载完成')
})
</script>

<template>
  <view class="activity-container">
    <!-- 活动头图 -->
    <view class="activity-header">
      <image
        class="activity-banner"
        src="https://img.zcool.cn/community/01c8b25d7c8f5ba8012060c8b4c4e6.jpg@1280w_1l_2o_100sh.jpg"
        mode="aspectFill"
      />
      <view class="activity-title-overlay">
        <text class="activity-title">
          🎉 暑假限时特价活动
        </text>
        <text class="activity-subtitle">
          精选绘本集5折起，快来抢购吧！
        </text>
      </view>
    </view>

    <!-- 活动详情 -->
    <view class="activity-content">
      <view class="section">
        <text class="section-title">
          活动时间
        </text>
        <text class="section-text">
          2024年7月1日 - 2024年8月31日
        </text>
      </view>

      <view class="section">
        <text class="section-title">
          活动内容
        </text>
        <text class="section-text">
          • 精选绘本集5折起
        </text>
        <text class="section-text">
          • 购买任意3套绘本集送精美书签
        </text>
        <text class="section-text">
          • 新用户首次购买额外享受9折优惠
        </text>
        <text class="section-text">
          • 满199元免费包邮
        </text>
      </view>

      <view class="section">
        <text class="section-title">
          参与方式
        </text>
        <text class="section-text">
          1. 浏览下方推荐绘本集
        </text>
        <text class="section-text">
          2. 选择心仪的绘本集加入购物车
        </text>
        <text class="section-text">
          3. 结算时自动享受优惠价格
        </text>
      </view>
    </view>

    <!-- 推荐绘本集 -->
    <view class="recommended-section">
      <text class="recommended-title">
        活动推荐绘本集
      </text>
      <view class="book-grid">
        <view v-for="book in activityBooks" :key="book.id" class="book-item">
          <image class="book-cover" :src="book.cover" mode="aspectFill" />
          <text class="book-title">
            {{ book.title }}
          </text>
          <view class="price-section">
            <text class="original-price">
              ¥{{ book.originalPrice }}
            </text>
            <text class="sale-price">
              ¥{{ book.salePrice }}
            </text>
            <text class="discount-tag">
              {{ book.discount }}折
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 立即参与按钮 -->
    <view class="action-section">
      <button class="participate-btn" @click="goToShop">
        立即参与活动
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 导入公共样式变量
@import '@/styles/variables.scss';

.activity-container {
  background: $bg-gradient;
  min-height: 100vh;
  padding: $container-padding;
}

/* 活动头图 - 与首页公告横幅风格一致 */
.activity-header {
  position: relative;
  height: 200px;
  border-radius: $border-radius-xl;
  overflow: hidden;
  margin-bottom: $spacing-xl;
  box-shadow: $shadow-lg;

  .activity-banner {
    width: 100%;
    height: 100%;
  }

  .activity-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: $spacing-2xl;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));

    .activity-title {
      display: block;
      color: $white;
      font-size: $font-size-xl;
      font-weight: $font-weight-bold;
      margin-bottom: $spacing-sm;
      font-family: $font-family;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .activity-subtitle {
      display: block;
      color: rgba(255, 255, 255, 0.9);
      font-size: $font-size-base;
      font-family: $font-family;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
}

/* 活动内容 - 儿童友好风格 */
.activity-content {
  @include glass-effect;
  padding: $spacing-2xl;
  border-radius: $border-radius-xl;
  margin-bottom: $spacing-xl;
  box-shadow: $shadow-lg;

  .section {
    margin-bottom: $spacing-2xl;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      display: block;
      font-size: $font-size-md;
      font-weight: $font-weight-semibold;
      color: $dark-gray;
      margin-bottom: $spacing-md;
      font-family: $font-family;
    }

    .section-text {
      display: block;
      font-size: $font-size-base;
      color: $medium-gray;
      line-height: $line-height-relaxed;
      margin-bottom: $spacing-sm;
      font-family: $font-family;
    }
  }
}

/* 推荐绘本集 - 儿童友好风格 */
.recommended-section {
  @include glass-effect;
  padding: $spacing-2xl;
  border-radius: $border-radius-xl;
  margin-bottom: $spacing-xl;
  box-shadow: $shadow-lg;

  .recommended-title {
    display: block;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $dark-gray;
    margin-bottom: $spacing-xl;
    font-family: $font-family;
  }

  .book-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: $spacing-md;

    .book-item {
      width: 48%;
      margin-bottom: $spacing-xl;
      cursor: pointer;
      transition: $transition-all;

      &:active {
        transform: scale(0.95);
      }

      .book-cover {
        width: 100%;
        height: $book-cover-height;
        border-radius: $book-cover-radius;
        margin-bottom: $spacing-sm;
        box-shadow: $shadow-md;
      }

      .book-title {
        display: block;
        font-size: $font-size-base;
        color: $dark-gray;
        margin-bottom: $spacing-sm;
        font-weight: $font-weight-medium;
        font-family: $font-family;
        @include text-ellipsis;
      }

      .price-section {
        display: flex;
        align-items: center;

        .original-price {
          font-size: $font-size-sm;
          color: $medium-gray;
          text-decoration: line-through;
          margin-right: $spacing-sm;
          font-family: $font-family;
        }

        .sale-price {
          font-size: $font-size-md;
          color: $coral;
          font-weight: $font-weight-semibold;
          margin-right: $spacing-sm;
          font-family: $font-family;
        }

        .discount-tag {
          background: $coral-gradient;
          color: $white;
          font-size: $font-size-xs;
          padding: $spacing-xs $spacing-sm;
          border-radius: $border-radius-sm;
          font-weight: $font-weight-medium;
          box-shadow: $shadow-coral;
        }
      }
    }
  }
}

/* 操作按钮 - 儿童友好风格 */
.action-section {
  padding: $spacing-2xl;

  .participate-btn {
    width: 100%;
    height: 48px;
    background: $coral-gradient;
    color: $white;
    font-size: $font-size-md;
    font-weight: $font-weight-semibold;
    font-family: $font-family;
    border-radius: $border-radius-3xl;
    border: none;
    box-shadow: $shadow-coral;
    transition: $transition-all;
    cursor: pointer;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 2px 8px rgba(255, 149, 149, 0.4);
    }
  }
}
</style>
